<template lang="pug">
.px-4.py-5
  .py-4.text-center.text-gray-600.text-base(v-if="list.length==0") 暂无客户点击添加
  .box(v-for="(item,i) in list" :key="i")
    view {{item.name}}
    view {{item.phone}}
.bottom-btn
  button.submit-btn.w-48(@click="openPopup") 添加客户
.h-32
uni-popup(ref="popup" type="bottom") 
  .popup-bottom
    .flex.font-medium.mb-8.text-base.justify-between
      .flex-1 添加客户
      uni-icons(type="closeempty"  color="dedede" size="24" @click.stop="closePopup()")
    view
      uni-easyinput(primaryColor="#B59E6D" v-model="form.name" placeholder="请输入客户名字" :clearable="false"  )
      .mb-4
      uni-easyinput(primaryColor="#B59E6D" v-model="form.phone" :errorMessage="false" placeholder="请输入客户手机号" :clearable="false"   type="digit")

    .flex.justify-end.mt-8.mb-16
      button.submit-btn.w-32(@click="submit") 确定
</template>
<script setup>
const list = ref([])
const defaultForm= {
  name:'',
  phone:''
}
const form = reactive({...defaultForm})

function submit(){
  list.value.push({...form});
  Object.assign(form,{...defaultForm});
  closePopup();
}
// ==== pop start ==== 
const popup = ref(null)
async function openPopup () {
  popup.value.open();
}
function closePopup () {
  popup.value.close();
}
// ==== pop end ====
</script>
<style scoped lang="postcss">
.bottom-btn {
  @apply fixed bottom-[calc(env(safe-area-inset-bottom)+4vh)] w-full flex justify-center;
}
.box{
  @apply bg-white py-4 px-4 shadow rounded flex justify-between text-base;
}
 
</style>